<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环写法</title>
	</head>
	<body>
		<div id= "app">
			<!-- vue中的循环 v-for 
			 1.循环获取数据的内容
			 2.可以循环复制标签
			 3.参数说明:item:变量名称 名称任意
					   in: 关键字  固定写法
					   array: 要遍历的数据-->
			 
			<h1 v-for="item in array">{{item}}</h1>
			<!-- v-for语法2: 获取数据/下标 -->
			<hr/>
			<h1 v-for="(item,index) in array">{{item}}---{{index}}</h1>
			<hr/>
			<!-- 循环遍历集合信息 -->
			<div v-for="item in userList">
				<p>ID号:{{item.id}}</p><p>名称:{{item.name}}</p>
			</div>
			<!-- 如果直接遍历对象，输出的是value值 -->
			<div v-for="(value,key) in user"> --{{key}}---{{value}}</div>
		</div>
		<script src="../js/vue.js">	
		</script>
		<script>
			const app=new Vue({
				el:"#app",
				data:{
					array:["风暴之灵","暗影猎手","虚空假面","远古冰魄"],
					userList:[{
						id:100,
						name:"主宰"
					},{
						id:200,
						name:"卡尔"
					},{ id:300,
						name:"地卜师"
						
					}],
					user: {
						id: 200,
						name: "鱼人夜行者",
						age: 18
					}
				
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>
